<!--
* @description  : 案件信息
* @descriptionDetail: 案件信息
* @copyright    : 浙江烟草
* @author       : sy
* @create       : 2023-03-03 16:15:38
-->
<template>
  <view class="item">
    <view class="list" @click="detailShow = true">
      <view class="top-part">
        <view class="part-left">
          <view>
            <image class="img-size" src="/static/case/icon-item.png"></image>
            <text class="title-text">
              {{ sealInfo.caseCode }}
            </text>
            <text class="part-right-quick" v-show="sealInfo.isQuick==1">
              快
            </text>
          </view>
        </view>
        <view class="part-right">
          {{ $u.test.isEmpty(sealInfo.handleStatusName) ? "未录入" : sealInfo.handleStatusName }}
        </view>
      </view>
      <view class="addr-bt">
        <view class="item-time">
          案发时间：{{ $u.test.isEmpty(sealInfo.caseDate) ? "未录入" : sealInfo.caseDate }}
        </view>
        <view class="part-right-type">
          <u-tag
            :text="sealInfo.handleProcName"
            handleProcName
            mode="light"
            type="primary"
            border-color="#ffffff"
          ></u-tag>
        </view>
      </view>
      <view class="addr-lay">
        <u-tag
          :text="$u.test.isEmpty(sealInfo.caseSourceName) ? '案件来源未录入' : sealInfo.caseSourceName"
          mode="light"
          type="info"
          border-color="#ffffff"
        ></u-tag>
        <u-tag
          :text="$u.test.isEmpty(sealInfo.party) ? '当事人未录入' : sealInfo.party"
          mode="light"
          type="info"
          border-color="#ffffff"
        ></u-tag>
      </view>
      <u-row gutter="16">
        <u-col span="6">
          <view class="item-reason">
            <text>真烟物品数量(条)：</text>
            <view class="part-right">
              {{ $u.test.isEmpty(sealInfo.trueCigarQty) ? "0.0" : sealInfo.trueCigarQty }}
            </view>
          </view>
        </u-col>
        <u-col span="6">
          <view class="item-reason">
            <text>32位码数量(条)：</text>
            <view class="part-right">
              {{ $u.test.isEmpty(sealInfo.qty) ? "0.0" : sealInfo.qty }}
            </view>
          </view>
        </u-col>
      </u-row>
      <view class="bottom-part">
        <view class="item-reason">
          <text>承办部门：</text>{{ $u.test.isEmpty(sealInfo.regDeptName) ? "未录入" : sealInfo.regDeptName }}
        </view>
        <view class="item-reason">
          <text>承办人：</text>{{ $u.test.isEmpty(sealInfo.undertaker) ? "未录入" : sealInfo.undertaker }}
        </view>
      </view>
    </view>
    <u-popup mode="bottom" height="40%" v-model="detailShow">
      <view class="content" style="padding:40rpx 20rpx;">
        <view style="color: red;" class="u-p-b-20">
          （注：条码录入及上报请在PC系统操作！）
        </view>
        <view style="padding-bottom: 80rpx;">
          <scroll-view :scroll-x="true" :style="{'height':getListHeight(),'width':width,}">
            <u-table style="width: 1600px;padding-right: 34px;">
              <u-tr class="m-tr">
                <u-th class="m-th m-td1">
                  序号
                </u-th>
                <u-th class="m-th m-b-l m-td2">
                  品牌规格
                </u-th>
                <u-th class="m-th m-b-l m-td4">
                  数量
                </u-th>
                <u-th class="m-th m-b-l m-td4">
                  单位
                </u-th>
                <u-th class="m-th m-b-l m-td4">
                  单价
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  金额
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  32位码数量
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  有效条码数量(条)
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  无效条码数量(条)
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  未打码数(条)
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  条码模糊数量(条)
                </u-th>
                <u-th class="m-th m-b-l m-td2">
                  来源地
                </u-th>
                <u-th class="m-th m-b-l m-td2">
                  去向地
                </u-th>
                <u-th class="m-th m-b-l m-td3">
                  物品性质
                </u-th>
                <u-th class="m-th m-b-l m-td2">
                  出口烟代理商代码
                </u-th>
              </u-tr>
              <scroll-view :scroll-y="true" :style="{'height':getTrHeight(),'width':'100%',}">
                <view>
                  <u-tr v-for="(item,index) in goodsList" :key="item.goodsDtlUuid">
                    <u-td class="m-td m-td1 m-b-t">
                      {{ index + 1 }}
                    </u-td>
                    <u-td class="m-td m-td2 m-b-l  m-b-t">
                      {{ item.goodsName }}
                    </u-td>
                    <u-td class="m-td m-td4 m-b-l  m-b-t">
                      {{ item.qty }}
                    </u-td>
                    <u-td class="m-td m-td4 m-b-l  m-b-t">
                      {{ item.unit }}
                    </u-td>
                    <u-td class="m-td m-td4 m-b-l  m-b-t">
                      {{ item.price }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.amt }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.bitCodeCount }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.validCodeQty }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.unvalidCodeQty }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.unprintCodeQty }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.vagueCodeQty }}
                    </u-td>
                    <u-td class="m-td m-td2 m-b-l  m-b-t">
                      {{ item.sourceAddrName }}
                    </u-td>
                    <u-td class="m-td m-td2 m-b-l  m-b-t">
                      {{ item.toAddrName }}
                    </u-td>
                    <u-td class="m-td m-td3 m-b-l  m-b-t">
                      {{ item.propSubtypeName }}
                    </u-td>
                    <u-td class="m-td m-td2 m-b-l  m-b-t">
                      {{ item.agentCode }}
                    </u-td>
                  </u-tr>
                  <u-tr class="m-tr">
                    <u-td class="m-th m-td1">
                      合计
                    </u-td>
                    <u-td class="m-th m-b-l m-td2">
                    </u-td>
                    <u-td class="m-th m-b-l m-td4">
                      {{ totalValue.qtyTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td4">
                    </u-td>
                    <u-td class="m-th m-b-l m-td4">
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                      {{ totalValue.bitCodeCountTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                      {{ totalValue.validCodeQtyTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                      {{ totalValue.unvalidCodeQtyTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                      {{ totalValue.unprintCodeQtyTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                      {{ totalValue.vagueCodeQtyTotal }}
                    </u-td>
                    <u-td class="m-th m-b-l m-td2">
                    </u-td>
                    <u-td class="m-th m-b-l m-td2">
                    </u-td>
                    <u-td class="m-th m-b-l m-td3">
                    </u-td>
                    <u-td class="m-th m-b-l m-td2">
                    </u-td>
                  </u-tr>
                </view>
              </scroll-view>
            </u-table>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import caseService from "@/service/case/case.service";
export default {
  name:"BitRollbackCaseInfoItem",
  props: {
    sealInfo:{
      type:Object,
      required:true,
    },
    flag:{
      type:Boolean,
      default:function(){
        return true
      },
    },
    height: { // 不能设置100% 之类的。 设置具体 px 数值
      type: Number,
      default: 400,
    },
    width: {
      type: String,
      default: '400px',
    },
  },
  data() {
    return {
      goodsList: [],
      detailShow:false,
      requestParam:{
        page:1,
        limit:1000,
      },
      totalValue:{
        qtyTotal:0,
        bitCodeCountTotal:0,
        validCodeQtyTotal:0,
        unvalidCodeQtyTotal:0,
        unprintCodeQtyTotal:0,
        vagueCodeQtyTotal:0,
      }, // 合计
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    getListHeight() {
      return (this.height - 45 - (38 * 3)) + "px";
    },
    getTrHeight() {
      return (this.height - 45 - (38 * 3) - 50) + "px";
    },
    loadData() {
      this.requestParam.caseUuid = this.sealInfo.caseUuid;
      this.loading = false;
      caseService.realGoodsNoEleList(this.requestParam).then(res => {
        if(res.success){
          let arr = res.data || [];
          if(res.data.length > 0){
            res.data.forEach((item) => {
              this.totalValue.qtyTotal += item.qty;
              this.totalValue.bitCodeCountTotal += item.bitCodeCount;
              this.totalValue.validCodeQtyTotal += item.validCodeQty;
              this.totalValue.unvalidCodeQtyTotal += item.unvalidCodeQty;
              this.totalValue.unprintCodeQtyTotal += item.unprintCodeQty;
              this.totalValue.vagueCodeQtyTotal += item.vagueCodeQty;
            });
          }
          this.goodsList = [...arr,];
        }else{
          this.$modal.alert(res.msg);
          this.goodsList = [];
        }
      }).catch(err => {
        this.$modal.alert(err);
        this.goodsList = [];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
 .list {
     width: 100%;
     height: auto;
     background-color: $uni-bg-color;
     //padding: 40rpx 30rpx 30rpx;
 }

 .img-size {
     width: 32rpx;
     height: 36rpx;
     vertical-align: middle;
 }

 .title-text {
     vertical-align: middle;
     font-weight: 600;
     font-size: 36rpx;
     margin-left: 20rpx;
 }

 .top-part {
     display: flex;
     justify-content: space-between;
 }
 .item-reason {
     color: $uni-text-color;
     font-size: 28rpx;
     padding-bottom: 8px;
     font-family: '微软雅黑', sans-serif;
	:nth-child(n+1){
		margin-top: 20rpx;
	}
	uni-text{
		color: $cm-form-right-icon-color;
	}
 }

 .item-time {
     color: $u-type-info-dark;
     font-size: 26rpx;
     font-family: '微软雅黑', sans-serif;
 }

 .part-right {
    font-size: 30rpx;
    font-weight: 600;
	color: $u-type-warning;
 }
 .part-right-type{
	font-size: 30rpx;
	font-weight: 400;
	margin-top: 20rpx;
	color: $font-color-spec;
	flex-shrink: 0;
 }
 .part-right-quick{
	color: white;
	padding: 5rpx 10rpx;
	width: 50rpx;
	margin-left: 15rpx;
	border-radius: 50%;
	text-align: center;
	background-color: $u-type-error;
 }

.addr-bt{
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.addr-lay{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  flex-grow: 1;
  align-items: top;
  margin: 16rpx 0;
  font-size: 24rpx;
  :nth-child(n){
	margin: 5rpx 0;
  }
  :last-child{
	margin-left: 16rpx;
  }
}
/deep/.u-td {
	white-space: inherit !important;
	height: auto !important;
	line-height: 30px;
}

.m-tr {
	background-color: #f5f6f8;
	line-height: 24px;
}

.m-th {
	font-size: 10px;
	padding: 0 !important;
	white-space: nowrap;
	overflow: hidden;
}

.m-b-t {
	border-top: 0.5px solid #E4E7ED;
}

.m-b-l {
	border-left: 0.5px solid #E4E7ED;
}

.m-td {
	font-size: 10px !important;
	padding: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.m-td1 {
	flex: 0.05;
}

.m-td2 {
	flex: 0.2;
}

.m-td3 {
	flex: 0.15;
}

.m-td4 {
	flex: 0.1;
}
</style>
